<template>
  <div class="recommend">
    <div class="filter-container">
      <el-tooltip
        class="item"
        effect="dark"
        content="请输入ID"
        placement="top"
      >
        <el-input
          v-model="listQuery.id"
          placeholder="ID"
        ></el-input>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="请选择内容源"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.sourceType"
          placeholder="内容源"
        >
          <el-option
            v-for="item in sourceTypeOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="是否为预推荐"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.isRecommend"
          placeholder="是否为预推荐"
        >
          <el-option
            v-for="item in isRecommendOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="请选择是否包含图片"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.hasImage"
          placeholder="是否包含图片"
          clearable
        >
          <el-option
            v-for="item in hasImageOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="请选择是否包含视频"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.hasVideo"
          placeholder="是否包含视频"
          clearable
        >
          <el-option
            v-for="item in hasVideoOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="daterangeChanged"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>

      <el-button
        type="primary"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="warning"
        @click="resetFilter"
      >重置</el-button>

    </div>

    <div class="app-container calendar-list-container">
      <div>
        <el-checkbox
          v-model="checkedAll"
          style="margin-right:10px;"
          @change="handleAllCheck"
        >全选</el-checkbox>
        <!--<el-button type="warning" @click="bitchRecommend">批量推荐</el-button>-->
        <el-button
          type="danger"
          @click="bitchDelete"
        >批量移除</el-button>
      </div>
      <div
        class="rec-li"
        v-for="item in list"
        :key="item.id"
      >
        <div class="rec-li-head">
          <el-checkbox
            v-model="item.checked"
            @change="handleCheckedBoxChange"
          ></el-checkbox>
          {{item.type | sourceFilter}}-{{item.subType}}
          {{item.publishTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}

          <span style="color:blue">{{item.status == 1?'推荐':'预推荐'}}</span>
          <span style="color:red">{{item.id}}</span>
          <div class="button-group">
            <el-button
              type="primary"
              size="small"
              @click="handleList(item)"
            >详情</el-button>
            <el-button
              type="danger"
              size="small"
              @click="deleteItem(item.id)"
            >移除</el-button>
          </div>
        </div>
        <div class="rec-li-body">
          <div class="rec-li-body-left">
            <div class="user">
              <img
                class="avatar"
                :src="item.avater"
                @click="imgClick(item.avater)"
              >
              <div class="username">
                <span class="name">{{item.nickname}}</span><span class="sex">{{item.sex | sex}}</span>
                <p>{{item.signature}}</p>
              </div>
            </div>

            <div class="tags">
              <el-tag
                type="success"
                size="small"
                v-for="(labelText,index) in item.label"
                style="margin-right: 10px"
                :key="index"
              >{{labelText}}</el-tag>
            </div>
            <div>
              <el-tag
                type="primary"
                size="small"
              >每日打卡</el-tag>
            </div>
            <div class="count">
              <span>阅读:{{item.readedCount}}</span>
              <span>转发:{{item.repostCount}}</span>
              <span>评论:{{item.commentCount}}</span>
              <span>点赞:{{item.likeCount}}</span>
              <span>热度:{{item.hotCount}}</span>
            </div>

          </div>
          <div class="rec-li-body-right">
            <div class="article-content">
              ​​{{item.content}}
            </div>
            <template v-if="!!item.videoUrls">
              <div
                class="video-cover"
                @click="openVideoDialog(item.videoUrls.video_url)"
              >
                <img
                  class="video-img"
                  alt=""
                  :src="item.videoUrls.pre_image"
                  style="display: block;width:200px;height:150px;"
                >
                <div class="video-play"></div>
              </div>
            </template>
            <template v-else>
              <div class="article-images">
                <img
                  class="avatar"
                  v-for="img in item.images"
                  :src="img.url | imgUrl"
                  :key="img.url"
                  @click="imgClick(img.url)"
                >
              </div>
            </template>
          </div>
        </div>
      </div>

    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <el-dialog
      :title="operationFormTitle"
      :close-on-click-modal="false"
      :visible.sync="operationFormVisible"
      class="rec-dialog"
      width="90%"
      @click.native="saveAll"
    >
      <el-row :gutter="40">
        <el-col
          :span="12"
          style="border-right:1px dashed #0a0a0a"
        >
          <el-form
            :rules="rules"
            class="small-space"
            :model="operationInfo"
            label-position="left"
            label-width="90px"
            ref="operationInfo"
          >
            <el-form-item label="内容源">
              {{operationInfo.type| sourceFilter }}-{{operationInfo.subType}}
            </el-form-item>

            <el-form-item label="发布时间">
              {{operationInfo.publishTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-form-item>

            <el-form-item
              label="话题"
              prop="topicId"
            >
              <el-select
                disabled
                v-model="operationInfo.topicId"
                placeholder="内容源"
                @change="topicChanged"
              >
                <el-option
                  v-for="item in topicOptions"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="内部ID">
              <el-input
                v-model="operationInfo.robotId"
                style="width:300px"
                disabled
              ></el-input>
              <el-button @click="searchRobot">查询</el-button>
            </el-form-item>

            <el-form-item label="昵称">
              {{operationInfo.nickname}}
            </el-form-item>

            <el-form-item label="头像">
              <img
                :src="operationInfo.avatar"
                style="width:90px;height:90px;"
              >
            </el-form-item>

            <el-form-item label="性别">
              {{operationInfo.sex | sex}}
            </el-form-item>

            <el-form-item label="个性签名">
              {{operationInfo.signature}}
            </el-form-item>

            <el-form-item label="标签">
              <el-tag
                disabled
                :key="tag"
                size="small"
                type="success"
                v-for="tag in operationInfo.label"
                closable
                :disable-transitions="false"
                @close="handleTagClose(tag)"
                style="margin-right:5px;"
              >
                {{tag}}
              </el-tag>
              <el-input
                disabled
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
              >+ 添加标签</el-button>
            </el-form-item>

            <el-form-item
              label="正文"
              prop="content"
            >
              <el-input
                disabled
                type="textarea"
                :autosize="{ minRows: 2}"
                placeholder="请输入内容"
                v-model="operationInfo.content"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              label="图片"
              prop="pictures"
            >
              <img
                v-for="img in operationInfo.images"
                :key="img.url"
                :src="img.url"
                width="30%"
              />
              <el-dialog
                :visible.sync="dialogVisible"
                append-to-body
              >
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                >
              </el-dialog>
            </el-form-item>

            <el-form-item
              label="阅读"
              prop="topic"
            >
              <el-input
                type="number"
                v-model.number="operationInfo.readedCount"
                style="width:200px;"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item
              label="转发"
              prop="topic"
            >
              <el-input
                type="number"
                v-model.number="operationInfo.repostCount"
                style="width:200px;"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item
              label="评论"
              prop="topic"
            >
              <el-input
                type="number"
                v-model.number="operationInfo.commentCount"
                style="width:200px;"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item
              label="点赞"
              prop="topic"
            >
              <el-input
                type="number"
                v-model.number="operationInfo.likeCount"
                style="width:200px;"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item
              label="热度"
              prop="topic"
            >
              <el-input
                type="number"
                v-model.number="operationInfo.hotCount"
                style="width:200px;"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col
          :span="12"
          style="height: 915px;overflow-y:scroll "
        >
          <el-tabs v-model="activeName">
            <el-tab-pane
              label="评论管理"
              name="first"
            >
              <comments-list
                :list="commentList"
                ref="commentsList"
                @changeCommentList="changeCommentList"
              ></comments-list>
            </el-tab-pane>

          </el-tabs>
        </el-col>
      </el-row>

      <!--<div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="confirm">保 存</el-button>
        <el-button @click="operationFormVisible = false">取 消</el-button>

      </div>-->
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisible"
      :show-close="false"
      close-on-click-modal
      class="img-dialog"
    >
      <img
        @click="closeDialog"
        :src="dialogImgSrc"
      >
    </el-dialog>

    <el-dialog
      :visible.sync="videoDialogVisible"
      @close="closePlay"
      custom-class="video-dialog"
    >
      <v-player
        :video-url="videoUrl"
        :state="videoPlayerState"
      ></v-player>
    </el-dialog>
  </div>

</template>

<script>
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { parseTime } from '@/filters/index'
import CommentsList from './components/commentsList'
import VPlayer from '@/components/VPlayer/index'
import TablePagination from '@/components/TablePagination'
import UploadFile from '@/components/UploadFile'
export default {
  name: 'recommend',
  components: { CommentsList, VPlayer, TablePagination, UploadFile },
  data() {
    return {
      videoPlayerState: true,
      videoDialogVisible: false,
      videoUrl: '',

      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 50,
        startTime: null,
        endTime: null,
        isRecommend: null,
        orderBy: 'update_time',
        orderType: 'desc'
      },
      rules: {
        topicId: [{ required: true, message: '不能为空', trigger: 'change' }]
      },
      commentList: [],
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: '',
      operationFormTitle: '',
      operationFormVisible: false,
      operationInfo: {},
      sourceTypeOptions: [
        { id: 0, text: '微博' },
        { id: 1, text: '即刻' },
        { id: 2, text: '微博精选' },
        { id: 3, text: '飞爪抖音' }
      ],
      hasImageOptions: [
        { id: 0, text: '不包含图片' },
        { id: 1, text: '包含图片' }
      ],
      isRecommendOptions: [
        { id: 1, text: '推荐' },
        { id: 2, text: '预推荐' }
      ],
      hasVideoOptions: [
        { id: 0, text: '不包含视频' },
        { id: 1, text: '包含视频' }
      ],
      topicOptions: [],
      dialogImageUrl: '',
      dialogVisible: false,
      inputVisible: false,
      inputValue: '',
      checkedAll: false,
      dialogFormVisible: false,
      dialogImgSrc: '',
      activeName: 'first'
    }
  },
  filters: {
    sourceFilter(id) {
      const sourceMap = {
        0: '微博',
        1: '即刻',
        2: '微博精选',
        3: '飞爪抖音'
      }
      return sourceMap[id]
    }
  },
  computed: {
    uploadImg() {
      return this.baseUrl + 'ContentDelivery/uploadImage'
    }
  },
  created() {
    this.getList()
    this.getTopicOption()
  },
  methods: {
    openVideoDialog(url) {
      this.videoDialogVisible = true
      this.videoUrl = url
    },
    closePlay() {},

    getList() {
      this.checkedAll = false
      this.listLoading = true
      this.$get('ContentDelivery/recommendList', this.listQuery).then(resp => {
        this.list = resp.data.items
        this.total = resp.data.count
        this.listLoading = false
      })
    },
    getTopicOption() {
      this.$get('ContentDelivery/topicOptions', this.listQuery).then(resp => {
        this.topicOptions = resp.data.items
      })
    },
    changeCommentList(data) {
      console.log(data)
    },
    handleList(row) {
      this.operationFormVisible = true
      this.$get('ContentDelivery/getCommentList', { articleId: row.id }).then(
        resp => {
          this.commentList = resp.data.items
        }
      )
      this.$nextTick(() => {
        this.$refs['operationInfo'].resetFields()
        this.operationFormTitle = '编辑内容'
        this.operationInfo = {
          type: row.type,
          id: row.id,
          articleId: row.articleId,
          accountId: row.accountId,
          publishTime: row.publishTime,
          subType: row.subType,
          updateTime: row.updateTime,
          robotId: row.bindRobotId,
          nickname: row.nickname,
          avatar: row.avater,
          sex: row.sex,
          signature: row.signature,
          label: row.label,
          topicId: row.topicId,
          content: row.content,
          images: row.images,
          readedCount: row.readedCount,
          repostCount: row.repostCount,
          commentCount: row.commentCount,
          likeCount: row.likeCount,
          hotCount: row.hotCount
        }
      })
    },
    confirm() {
      let param = {
        id: this.operationInfo.id,
        articleId: this.operationInfo.articleId,
        type: this.operationInfo.type,
        subType: this.operationInfo.subType,
        accountId: this.operationInfo.accountId,
        publishTime: this.operationInfo.publishTime,
        bindRobotId: this.operationInfo.robotId,
        nickname: this.operationInfo.nickname,
        avater: this.operationInfo.avatar,
        sex: this.operationInfo.sex,
        signature: this.operationInfo.signature,
        label: this.operationInfo.label,
        topicId: this.operationInfo.topicId,
        title: this.operationInfo.title,
        content: this.operationInfo.content,
        images: this.operationInfo.images,
        voiceUrl: '',
        videoUrl: '',
        readedCount: this.operationInfo.readedCount,
        repostCount: this.operationInfo.repostCount,
        commentCount: this.operationInfo.commentCount,
        likeCount: this.operationInfo.likeCount,
        hotCount: this.operationInfo.hotCount,
        comments: []
      }
      for (let x of this.commentList) {
        param.comments.push(x.content)
      }
      this.$post('ContentDelivery/updateRecommend', param).then(resp => {
        if (resp.code === 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    },
    uploadSuccess(resp, file, fileList) {
      this.operationInfo.images.push({ url: resp.data.url })
    },
    handleRemove(file, fileList) {
      let imgUrl = file.url
      for (let i = 0; i < this.operationInfo.images.length; i++) {
        if (this.operationInfo.images[i].url == imgUrl) {
          this.operationInfo.images.splice(i, 1)
        }
      }
      console.log(this.operationInfo.images)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleTagClose(tag) {
      this.operationInfo.label.splice(this.operationInfo.label.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.operationInfo.label.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleCheckedBoxChange(value) {
      this.checkedAll = this.list.every((item, index, array) => {
        return item.checked === true
      })
    },
    bitchRecommend() {
      let checkedIds = []
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedIds.push(item.id)
        }
      })
      console.log(checkedIds)
    },
    handleAllCheck(value) {
      this.list.forEach((item, index, arr) => {
        if (value) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
    },
    imgClick(src) {
      this.dialogImgSrc = src
      this.dialogFormVisible = true
    },
    closeDialog() {
      this.dialogFormVisible = false
    },
    topicChanged(val) {
      this.$get('ContentDelivery/getRandomRobot', { topicId: val }).then(
        resp => {
          let robot = resp.data.robot
          this.operationInfo.robotId = robot.uid
          this.operationInfo.sex = robot.sex
          this.operationInfo.nickname = robot.nickname
          this.operationInfo.avatar = this.imgHost + robot.avatar
          this.operationInfo.signature = robot.signature
        }
      )
    },
    searchRobot() {
      this.$get('ContentDelivery/getRobotInfo', {
        robotId: this.operationInfo.robotId
      }).then(resp => {
        let robot = resp.data.robot
        this.operationInfo.sex = robot.sex
        this.operationInfo.nickname = robot.nickname
        this.operationInfo.avatar = robot.avatar
        this.operationInfo.signature = robot.signature
      })
    },
    saveAll() {
      this.$refs['commentsList'].saveAll()
    },
    addToRecommend(id) {
      this.$get('ContentDelivery/addToRecommend', { id: id }).then(resp => {
        if (resp.code === 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    },
    deleteItem(id) {
      this.$post('ContentDelivery/delete', {
        articleIds: [id],
        isRecommend: 1
      }).then(resp => {
        if (resp.code === 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    },
    bitchDelete() {
      let checkedIds = []
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedIds.push(item.id)
        }
      })
      this.$post('ContentDelivery/delete', {
        articleIds: checkedIds,
        isRecommend: 1
      }).then(resp => {
        if (resp.code === 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.recommend {
  .video-dialog {
    .el-dialog__body {
      background: #000000;
    }
    .el-dialog__header {
      background: #000000;
    }
    .el-dialog__headerbtn {
      font-size: 22px;
      .el-dialog__close {
        color: #ffffff;
      }
    }
  }

  .video-cover {
    position: relative;
    width: 338px;
    overflow: hidden;
    cursor: pointer;
    .video-play {
      position: absolute;
      opacity: 1;
      z-index: 20;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      background: url('/static/image/play-button.png') 12px 11px no-repeat;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }
  .img-dialog {
    .el-dialog {
      box-shadow: none;
      background: none;
      .el-dialog__body {
        text-align: center;
      }
    }
  }
  .rec-dialog {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }
    .avatar {
      width: 90px;
      height: 90px;
      display: block;
    }
    .el-upload--picture-card {
      width: 90px;
      height: 90px;
      line-height: 100px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 90px;
      height: 90px;
    }
    .el-dialog {
      margin-top: 5vh !important;
    }
  }
  .rec-li:hover {
    border: 1px solid #219ae6;
  }
  .rec-li {
    border: 1px solid #cccaca;
    border-radius: 5px;
    margin: 10px 0;

    .rec-li-head {
      padding: 10px;
      border-bottom: 1px solid #cccaca;
      .button-group {
        float: right;
      }
      .el-checkbox__inner {
        margin-top: -2px;
      }
    }
    .rec-li-body {
      padding: 10px;
      display: flex;
      font-size: 14px;
      .rec-li-body-left {
        flex: 1;
        padding-right: 10px;
        .user {
          display: flex;
          .avatar {
            width: 40px;
            height: 40px;
            margin: 5px;
          }
          .username {
            padding: 5px;
            flex: 1;
            p {
              margin: 10px 0 0 0;
            }
            .name {
              margin-right: 20px;
            }
          }
        }
        .tags {
          margin: 10px 0;
        }
        .count {
          span {
            display: inline-block;
            margin: 10px;
          }
        }
      }
      .rec-li-body-right {
        flex: 1;
        .article-images {
          img {
            display: inline-block;
            width: 50px;
            height: 60px;
            margin: 5px 10px;
          }
        }
      }
    }
  }
}
</style>
